<template>
  <div class="home-container">
    <!-- 顶部搜索栏（固定定位） -->
    <div class="search-bar fixed-top">
      <el-input v-model="searchKeyword" placeholder="搜索商品" prefix-icon="Search" class="search-input" />
      <el-button @click="handleSearch" class="search-button">搜索</el-button>
    </div>
    
    <!-- 图标导航区域（固定定位在搜索栏下方） -->
    <div class="icon-nav fixed-top" style="top: 60px;">
      <div 
        v-for="category in mainCategories"
         :key="category.id"
         :class="{ 'active-icon': activeMainCategory === category.id }" 
          @click="switchCategory(category.id)" 
      >
        <img :src="resolveAsset(category.icon)" alt="分类图标" class="category-icon" />
      <span>{{ category.name }}</span>
      </div>
    </div>
    
    <!-- 整体布局容器（相对定位，用于容纳固定元素和滚动内容） -->
    <div class="main-container">
      <!-- 左侧分类导航栏（固定定位） -->
      <div class="category-nav fixed-left">
        <el-scrollbar style="height: calc(100vh - 160px)">
          <el-menu
      :default-active="activeSubcategory"
      @select="activeSubcategory = $event"
    >
      <el-menu-item
        v-for="sub in currentSubcategories"
        :key="sub.id"
        :index="sub.id"
      >
        {{ sub.name }}
            </el-menu-item>
          </el-menu>
        </el-scrollbar>
      </div>
      
      <!-- 右侧商品列表（可滚动区域） -->
      <div class="goods-list scrollable">
        <el-card v-for="goods in filteredGoods" :key="goods.goodsId" class="goods-card">
          <div class="goods-info">
            <img :src="resolveAsset(goods.imageUrl)" alt="商品图片" class="goods-image" />
            <div class="goods-details">
              <span class="goods-number">编号{{ goods.goodsNumber }} {{ goods.goodsName }}</span>
              <p class="goods-stock">库存{{ goods.stock }}</p>
              <p class="goods-price">￥{{ goods.price }}</p>
            </div>
          </div>
          <div class="stock-control">
            <el-button type="text" @click="decreaseStock(goods)" :disabled="goods.stock <= 0">-</el-button>
            <div class="quantity-wrapper">
              <input 
                type="number" 
                v-model="goods.currentStock" 
                class="quantity-input" 
                :min="0" 
                :max="goods.stock" 
                @blur="handleQuantityBlur(goods)"
              />
            </div>
            <el-button type="text" @click="increaseStock(goods)">+</el-button>
          </div>
        </el-card>
      </div>
    </div>
    
    <!-- 底部栏（固定定位） -->
    <div class="footer-bar fixed-bottom">
      <div class="customer-service" @click="showWeChatQrCode = true">
        <el-icon><ChatDotRound /></el-icon>
        <span>微信</span>
         <!-- 微信二维码弹窗 -->
      <el-dialog
        v-model="showWeChatQrCode"
        title="微信好友二维码"
        width="250px"
        center
      >
        <img 
          src="../assets/wechat-qr-code.jpg" 
          alt="微信二维码" 
          class="qr-code-image"
        />
        <span>扫描上面二维码图片，加我为朋友</span>
        
      </el-dialog>
      </div>
      <div class="shopping-cart">
        <el-icon><ShoppingCart /></el-icon>
        <span>购物车</span>
      </div>
    </div>
  </div>
</template>


<script setup>
import { ref, computed,onMounted } from 'vue';
// 模拟大分类数据（烟草、酒水）
const mainCategories = ref([
  { id: 'tobacco', name: '烟草', icon: 'yc.png' },
  { id: 'drinks', name: '酒水', icon: 'js.png' }
]);

// 模拟子分类数据（关联大分类ID）
const subcategories = ref([
  { id: 'hardBoxCoarse', name: '硬盒粗支', mainCategory: 'tobacco' },
  { id: 'softBoxCoarse', name: '软盒粗支', mainCategory: 'tobacco' },
  { id: 'mediumCoarseFine', name: '中支细支',mainCategory: 'tobacco' },
  { id: 'thailandPackaging', name: '泰国包装',mainCategory: 'tobacco' },
  { id: 'eCigarette', name: '电子烟',mainCategory: 'tobacco' },
  { id: 'whiteWine', name: '白酒', mainCategory: 'drinks' },
  { id: 'redWine', name: '红酒', mainCategory: 'drinks' },
  { id: 'beer', name: '啤酒', mainCategory: 'drinks' },
  { id: 'yj', name: '洋酒', mainCategory: 'drinks' }
  
]);
// 定义不同分类类型的数据
// const categoryData = {
//   tobacco: [
//     { id: 'hardBoxCoarse', name: '硬盒粗支' },
//     { id: 'softBoxCoarse', name: '软盒粗支' },
//     { id: 'mediumCoarseFine', name: '中支细支' },
//     { id: 'thailandPackaging', name: '泰国包装' },
//     { id: 'eCigarette', name: '电子烟' }
//   ],
//   drinks: [
//     { id: 'whiteWine', name: '白酒' },
//     { id: 'redWine', name: '红酒' },
//     { id: 'beer', name: '啤酒' },
//     { id: 'whiskey', name: '威士忌' },
//     { id: 'champagne', name: '香槟' }
//   ]
// };
// 控制微信二维码弹窗显示/隐藏
const showWeChatQrCode = ref(false);

// 模拟商品数据（包含子分类ID）
const goodsList = ref([
  // 烟草类商品
  {
    goodsId: 1,
    goodsName: '粗支和天下硬盒',
    subcategoryId: 'hardBoxCoarse', // 关联子分类ID
    stock: 100,
    price: 710,
    currentStock: 0, // 初始化数量
    imageUrl: 'y1.png'
  },
  {
    goodsId: 2,
    goodsName: '粗支和天下硬盒2',
    subcategoryId: 'hardBoxCoarse', // 关联子分类ID
    stock: 100,
    price: 710,
    currentStock: 0, // 初始化数量
    imageUrl: 'y2.png'
  },
  {
    goodsId: 3,
    goodsName: '粗支和天下硬盒3',
    subcategoryId: 'hardBoxCoarse', // 关联子分类ID
    stock: 100,
    price: 710,
    currentStock: 0, // 初始化数量
    imageUrl: 'y3.png'
  },
  {
    goodsId: 2,
    goodsName: '软盒黄鹤楼1916',
    subcategoryId: 'softBoxCoarse',
    stock: 80,
    price: 720,
    currentStock: 0, // 初始化数量
    imageUrl: 'y4.png'
  },
  {
    goodsId: 3,
    goodsName: '软盒黄鹤楼1917',
    subcategoryId: 'softBoxCoarse',
    stock: 80,
    price: 720,
    currentStock: 0, // 初始化数量
    imageUrl: 'y5.png'
  },
  {
    goodsId: 4,
    goodsName: '软盒黄鹤楼1918',
    subcategoryId: 'softBoxCoarse',
    stock: 80,
    price: 720,
    currentStock: 0, // 初始化数量
    imageUrl: 'y6.png'
  },
  {
    goodsId: 5,
    goodsName: '软盒黄鹤楼1919',
    subcategoryId: 'softBoxCoarse',
    stock: 80,
    price: 720,
    currentStock: 0, // 初始化数量
    imageUrl: 'y7.png'
  },
  {
    goodsId: 6,
    goodsName: '软盒黄鹤楼1920',
    subcategoryId: 'softBoxCoarse',
    stock: 80,
    price: 720,
    currentStock: 0, // 初始化数量
    imageUrl: 'y8.png'
  },{
    goodsId: 3,
    goodsName: '中支黄鹤楼1917',
    subcategoryId: 'mediumCoarseFine',
    stock: 80,
    price: 720,
    currentStock: 0, // 初始化数量
    imageUrl: 'y9.png'
  },
  {
    goodsId: 4,
    goodsName: '细支黄鹤楼1918',
    subcategoryId: 'mediumCoarseFine',
    stock: 80,
    price: 720,
    currentStock: 0, // 初始化数量
    imageUrl: 'y10.png'
  },
  {
    goodsId: 5,
    goodsName: '细支黄鹤楼1919',
    subcategoryId: 'mediumCoarseFine',
    stock: 80,
    price: 720,
    currentStock: 0, // 初始化数量
    imageUrl: 'y11.png'
  },
  // 酒水类商品
  {
    goodsId: 3,
    goodsName: '茅台53度白酒',
    subcategoryId: 'whiteWine',
    stock: 20,
    price: 1499,
    currentStock: 0, // 初始化数量
    imageUrl: 'j1.png'
  },
  {
    goodsId: 4,
    goodsName: '法国波尔多红酒',
    subcategoryId: 'redWine',
    stock: 35,
    price: 899,
    currentStock: 0, // 初始化数量
    imageUrl: 'j2.png'
  }
]);

const searchKeyword = ref('');
const activeIcon = ref('tobacco'); // 默认显示烟草分类
const activeCategory = ref('hardBoxCoarse'); // 默认选中第一个分类

// 当前显示的分类列表
const currentCategories = computed(() => {
  return categoryData[activeIcon.value] || categoryData.tobacco;
});
// 当前选中的大分类ID
const activeMainCategory = ref(mainCategories.value[0].id);
const activeSubcategory = ref('');

// 计算当前大分类下的子分类列表
const currentSubcategories = computed(() => {
  return subcategories.value.filter(sub => 
    sub.mainCategory === activeMainCategory.value
  );
});



// 当前选中的子分类ID
// const activeSubcategory = ref(subcategories.value[0].id);






// 辅助函数：解析资源路径
const resolveAsset = (path) => {
  return new URL(`/src/assets/${path}`, import.meta.url).href;
};



// 初始化：根据第一个大分类过滤子分类，并选中第一个子分类
// 初始化
onMounted(() => {
  switchCategory(mainCategories.value[0].id); // 触发初始加载
});





// 根据分类和搜索关键词筛选商品
// const filteredGoods = computed(() => {
//   const filteredByType = goodsList.value.filter(goods => 
//     goods.categoryType === activeIcon.value
//   );
  
//   if (!searchKeyword.value) {
//     return filteredByType;
//   }
  
//   return filteredByType.filter(goods => 
//     goods.goodsName.includes(searchKeyword.value)
//   );
// });







const filteredGoods = computed(() => {
  // 先按子分类过滤
  const bySubcategory = goodsList.value.filter(goods => 
    goods.subcategoryId === activeSubcategory.value
  );
  
  // 再按关键词过滤
  if (!searchKeyword.value) {
    return bySubcategory;
  }
  
  return bySubcategory.filter(goods => 
    goods.goodsName.includes(searchKeyword.value)
  );
});




const switchCategory = (categoryId) => {
  activeMainCategory.value = categoryId;
  
  // 关键修改：自动选择新分类的第一个子分类
  const firstSubcategory = currentSubcategories.value[0];
  if (firstSubcategory) {
    activeSubcategory.value = firstSubcategory.id;
  }
};

// 搜索功能
const handleSearch = () => {
  console.log('执行搜索', searchKeyword.value);
};

// 分类切换处理
const handleCategorySelect = (key) => {
  activeCategory.value = key;
  console.log('切换分类', key);
  // 这里可以添加根据具体分类获取商品的逻辑
};

// 减少库存
const decreaseStock = (goods) => {
  if (goods.currentStock > 0) {
    goods.currentStock--;
  }
};

// 增加库存
const increaseStock = (goods) => {
  if (goods.currentStock < goods.stock) {
    goods.currentStock++;
  }
};
// 处理输入框失去焦点事件，确保输入数值在合理范围
const handleQuantityBlur = (goods) => {
  if (goods.currentStock < 0) {
    goods.currentStock = 0;
  } else if (goods.currentStock > goods.stock) {
    goods.currentStock = goods.stock;
  }
};
</script>

<style scoped>
.home-container {
  max-width: 1200px;
  margin: -8px auto;
  position: relative;
  min-height: 100vh;
}
/* 二维码图片样式 */
.qr-code-image {
  width: 200px;
  height: 200px;
  object-fit: contain;
  margin: 20px 0;
  
}
/* 顶部固定元素 */
.fixed-top {
  position: fixed;
  left: 0;
  right: 0;
  z-index: 100;
}

/* 右侧滚动区域 */
.main-container {
  margin-left: 120px; /* 预留左侧导航栏宽度 */
  padding-top: 120px; /* 预留顶部固定元素高度 */
  padding-bottom: 50px; /* 预留底部栏高度 */
}


.search-bar {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 60px;
  background-color: #92d700;
}

.search-input {
  width: 80%;
  height: 40px;
  background: #fff;
  border: none; 
  font-size: 16px;
}

.search-button {
  width: 80px;
  height: 40px;
  background: skyblue;
  border: none; 
  color: #fff;
  font-size: 16px;
  cursor: pointer;
}

.icon-nav {
  display: flex;
  justify-content: center;
  gap: 50px;
  padding: 15px 0;
  background-color: #92d700;
}

.category-icon {
  width: 50px;
  height: 50px;
  object-fit: contain;
  cursor: pointer;
}

.active-icon {
  color: #1890ff;
}

.active-icon img {
  transform: scale(1.1);
  border-bottom: 2px solid #1890ff;
}

.main-content {
  display: flex;
  margin-top: 20px;
}

.category-nav {
  width: 200px;
  background-color: #f5f5f5;
  padding: 10px;
}

.goods-list {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  padding: 10px;
  min-height: calc(100vh - 240px); /* 计算可滚动区域高度 */
  overflow-y: auto; /* 商品列表超出时显示滚动条 */
}


/* 底部固定栏 */
.fixed-bottom {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 50px;
  background-color: #92d700;
  z-index: 100;
}

/* 左侧固定导航栏 */
.fixed-left {
  position: fixed;
  top: 120px; /* 搜索栏+图标导航栏高度 */
  left: 0;
  bottom: 50px; /* 底部栏高度 */
  width: 200px;
  background-color: #f5f5f5;
  padding: 10px;
  overflow-y: auto; /* 允许导航栏内部滚动 */
}

.goods-card {
  height: 150px;
  width: 100%;
  border: 1px solid #e0e0e0;
  overflow: hidden; /* 超出部分隐藏 */
  position: relative; /* 父容器相对定位 */
  border-radius: 5px;
  padding: 10px;
}

.goods-info {
  display: flex;
  margin-bottom: 10px;
}

.goods-image {
  width: 100px;
  height: 100px;
  object-fit: cover;
  margin-right: 10px;
}

.goods-details {
  flex: 1;
}

.goods-number {
  font-size: 16px;
  font-weight: 500;
}

.goods-stock {
  font-size: 14px;
  color: #606266;
}

.goods-price {
  color: #f56c6c;
  font-size: 16px;
  font-weight: 500;
}

.stock-control {
  display: flex;
  justify-content: center;
   position: absolute; /* 绝对定位 */
   bottom: 20%;
   left: 0;
   right: 0;
  align-items: center;
}

.quantity-wrapper {
  display: flex;
  align-items: center;
}

.quantity-input {
  width: 40px;
  height: 28px;
  text-align: center;
  border: 1px solid #ccc;
  border-radius: 4px;
  margin: 0 10px;
}

/* 隐藏Chrome、Safari、Edge等浏览器的数字输入框的spinner */
.quantity-input::-webkit-outer-spin-button,
.quantity-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* 隐藏Firefox浏览器的数字输入框的spinner */
.quantity-input {
  -moz-appearance: textfield;
}

.footer-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 50px;
  background-color: #92d700;
  margin-top: 20px;
  padding: 0 120px;
}

.customer-service,
.shopping-cart {
  display: flex;
  align-items: center;
}

.customer-service span,
.shopping-cart span {
  margin-left: 5px;
}
</style>